"use client";

import { programApplicationFormMultipleChoiceFieldSchema } from "@/lib/zod/schemas/program-application-form";
import { EditList, EditListItem } from "@/ui/partners/groups/design/edit-list";
import {
  Button,
  Modal,
  Switch,
  useMediaQuery,
  useScrollProgress,
} from "@dub/ui";
import { cn } from "@dub/utils";
import { Dispatch, SetStateAction, useId, useRef } from "react";
import { Controller, FormProvider, useForm } from "react-hook-form";
import { v4 as uuid } from "uuid";
import { z } from "zod";

type MultipleChoiceFieldData = z.infer<
  typeof programApplicationFormMultipleChoiceFieldSchema
>;

type MultipleChoiceFieldModalProps = {
  showModal: boolean;
  setShowModal: Dispatch<SetStateAction<boolean>>;
  defaultValues?: Partial<MultipleChoiceFieldData>;
  onSubmit: (data: MultipleChoiceFieldData) => void;
};

export function MultipleChoiceFieldModal(props: MultipleChoiceFieldModalProps) {
  return (
    <Modal showModal={props.showModal} setShowModal={props.setShowModal}>
      <MultipleChoiceFieldModalInner {...props} />
    </Modal>
  );
}

function MultipleChoiceFieldModalInner({
  setShowModal,
  onSubmit,
  defaultValues,
}: MultipleChoiceFieldModalProps) {
  const id = useId();
  const { isMobile } = useMediaQuery();

  const form = useForm<MultipleChoiceFieldData>({
    defaultValues: defaultValues ?? {
      id: uuid(),
      type: "multiple-choice",
      label: "",
      required: false,
      data: {
        multiple: false,
        options: [
          {
            id: uuid(),
            value: "",
          },
        ],
      },
    },
  });

  const {
    handleSubmit,
    register,
    watch,
    setValue,
    setError,
    clearErrors,
    formState: { errors },
    control,
  } = form;

  const fields = watch("data.options");

  const scrollRef = useRef<HTMLDivElement>(null);
  const { scrollProgress, updateScrollProgress } = useScrollProgress(scrollRef);

  return (
    <FormProvider {...form}>
      <div className="p-4 pt-3">
        <h3 className="text-base font-semibold leading-6 text-neutral-800">
          {defaultValues ? "Edit" : "Add"} multiple choice
        </h3>
        <form
          className="mt-4 flex flex-col gap-6"
          onSubmit={(e) => {
            e.stopPropagation();
            handleSubmit(async (data) => {
              if (data.data.options.length < 2) {
                setError("data.options", {
                  type: "manual",
                  message: "Requires minimum of 2 options",
                });
                return;
              }

              setShowModal(false);
              onSubmit(data);
            })(e);
          }}
        >
          {/* Label */}
          <div>
            <label
              htmlFor={`${id}-label`}
              className="flex items-center gap-2 text-sm font-medium text-neutral-700"
            >
              Input label
            </label>
            <div className="mt-2 rounded-md shadow-sm">
              <input
                id={`${id}-title`}
                type="text"
                placeholder=""
                autoFocus={!isMobile}
                className={cn(
                  "block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm",
                  !!errors.label &&
                    "border-red-600 focus:border-red-500 focus:ring-red-600",
                )}
                {...register("label", { required: true })}
              />
            </div>
          </div>

          {/* Required */}
          <div>
            <Controller
              name="required"
              control={control}
              render={({ field }) => (
                <label
                  className="flex items-center justify-between gap-1.5"
                  htmlFor={`${id}-required`}
                >
                  <span className="text-sm font-medium text-neutral-700">
                    Required
                  </span>
                  <Switch
                    id={`${id}-required`}
                    checked={field.value}
                    fn={field.onChange}
                    trackDimensions="radix-state-checked:bg-black focus-visible:ring-black/20 w-7 h-4"
                    thumbDimensions="size-3"
                    thumbTranslate="translate-x-3"
                  />
                </label>
              )}
            />
          </div>

          {/* Allow multiple selections */}
          <div>
            <Controller
              name="data.multiple"
              control={control}
              render={({ field }) => (
                <label
                  className="flex items-center justify-between gap-1.5"
                  htmlFor={`${id}-multiple`}
                >
                  <span className="text-sm font-medium text-neutral-700">
                    Allow multiple selections
                  </span>
                  <Switch
                    id={`${id}-multiple`}
                    checked={field.value}
                    fn={field.onChange}
                    trackDimensions="radix-state-checked:bg-black focus-visible:ring-black/20 w-7 h-4"
                    thumbDimensions="size-3"
                    thumbTranslate="translate-x-3"
                  />
                </label>
              )}
            />
          </div>

          <div>
            <label
              htmlFor={`${id}-options`}
              className="mb-2 flex items-center gap-2 text-sm font-medium text-neutral-700"
            >
              Options
            </label>

            <div className="relative -my-2">
              <div
                ref={scrollRef}
                onScroll={updateScrollProgress}
                className="scrollbar-hide relative max-h-[calc(100vh-300px)] overflow-y-auto py-2"
              >
                <EditList
                  values={fields.map(({ id }) => id)}
                  addButtonLabel="Add option"
                  onAdd={() => {
                    const id = uuid();

                    const newOptions = [
                      ...fields,
                      {
                        id,
                        value: "",
                      },
                    ];

                    setValue("data.options", newOptions, { shouldDirty: true });

                    if (newOptions.length >= 2) {
                      clearErrors("data.options");
                    }

                    return id;
                  }}
                  onReorder={(updated) =>
                    setValue(
                      "data.options",
                      updated.map((id) => fields.find((f) => f.id === id)!),
                      { shouldDirty: true },
                    )
                  }
                >
                  {fields.map((field, index) => {
                    const error = errors.data?.options?.[index]?.value;

                    return (
                      <EditListItem
                        key={field.id}
                        value={field.id}
                        error={!!error?.message}
                        className={cn(
                          !error && "focus-within:border-neutral-500",
                        )}
                        title={
                          <input
                            id={`${id}-${field.id}-name`}
                            type="text"
                            placeholder="Option"
                            className={cn(
                              "my-1 block w-full rounded-md border-transparent bg-transparent py-1 text-sm text-neutral-900 placeholder-neutral-400 focus:border-transparent focus:outline-none focus:ring-0",
                            )}
                            {...register(`data.options.${index}.value`, {
                              required: "Value is required",
                            })}
                          />
                        }
                        onRemove={
                          fields.length > 1
                            ? () =>
                                setValue(
                                  "data.options",
                                  fields.filter(({ id }) => id !== field.id),
                                  { shouldDirty: true },
                                )
                            : undefined
                        }
                      />
                    );
                  })}
                </EditList>
              </div>

              {/* Bottom scroll fade */}
              <div
                className="pointer-events-none absolute bottom-0 left-0 hidden h-16 w-full bg-gradient-to-t from-white sm:block"
                style={{ opacity: 1 - Math.pow(scrollProgress, 2) }}
              />
            </div>
          </div>

          <div className="flex items-center justify-between gap-2">
            <div>
              {errors.data?.options?.message && (
                <span className="text-xs text-red-600 dark:text-red-400">
                  {errors.data?.options?.message}
                </span>
              )}
            </div>
            <div className="flex items-center gap-2">
              <Button
                onClick={() => setShowModal(false)}
                variant="secondary"
                text="Cancel"
                className="h-8 w-fit px-3"
              />
              <Button
                type="submit"
                variant="primary"
                text={defaultValues ? "Update" : "Add"}
                className="h-8 w-fit px-3"
              />
            </div>
          </div>
        </form>
      </div>
    </FormProvider>
  );
}

export function MultipleChoiceFieldThumbnail() {
  return (
    <svg
      width="168"
      height="100"
      viewBox="0 0 168 100"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="h-auto w-full"
    >
      <rect x="0.5" y="0.5" width="167" height="99" rx="5.5" fill="white" />
      <rect x="0.5" y="0.5" width="167" height="99" rx="5.5" stroke="#E5E5E5" />
      <rect
        x="25.3125"
        y="27.5625"
        width="9.375"
        height="9.375"
        rx="2.1875"
        fill="#171717"
      />
      <rect
        x="25.3125"
        y="27.5625"
        width="9.375"
        height="9.375"
        rx="2.1875"
        stroke="#171717"
        strokeWidth="0.625"
      />
      <g clipPath="url(#clip0_2001_4158)">
        <path
          d="M27.8298 32.3367L29.2187 34.0728L32.1701 30.427"
          stroke="white"
          strokeWidth="0.9375"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>
      <path
        d="M45.8807 35.75V28.4773H48.3381C48.9063 28.4773 49.3726 28.5743 49.7372 28.7685C50.1018 28.9602 50.3717 29.2242 50.5469 29.5604C50.7221 29.8965 50.8097 30.2789 50.8097 30.7074C50.8097 31.1359 50.7221 31.5159 50.5469 31.8473C50.3717 32.1787 50.103 32.4392 49.7408 32.6286C49.3786 32.8156 48.9157 32.9091 48.3523 32.9091H46.3636V32.1136H48.3239C48.7121 32.1136 49.0246 32.0568 49.2614 31.9432C49.5005 31.8295 49.6733 31.6686 49.7798 31.4602C49.8887 31.2495 49.9432 30.9986 49.9432 30.7074C49.9432 30.4162 49.8887 30.1617 49.7798 29.9439C49.6709 29.7261 49.4969 29.558 49.2578 29.4396C49.0187 29.3189 48.7027 29.2585 48.3097 29.2585H46.7614V35.75H45.8807ZM49.304 32.483L51.0938 35.75H50.071L48.3097 32.483H49.304ZM54.3919 35.8636C53.8663 35.8636 53.4129 35.7476 53.0318 35.5156C52.653 35.2812 52.3606 34.9545 52.1547 34.5355C51.9511 34.1141 51.8493 33.6241 51.8493 33.0653C51.8493 32.5066 51.9511 32.0142 52.1547 31.5881C52.3606 31.1596 52.6471 30.8258 53.014 30.5866C53.3833 30.3452 53.8142 30.2244 54.3066 30.2244C54.5907 30.2244 54.8713 30.2718 55.1483 30.3665C55.4252 30.4612 55.6774 30.6151 55.9047 30.8281C56.1319 31.0388 56.313 31.3182 56.448 31.6662C56.5829 32.0142 56.6504 32.4427 56.6504 32.9517V33.3068H52.4458V32.5824H55.7981C55.7981 32.2746 55.7366 32 55.6135 31.7585C55.4927 31.517 55.3199 31.3265 55.095 31.1868C54.8725 31.0471 54.6097 30.9773 54.3066 30.9773C53.9728 30.9773 53.684 31.0601 53.4402 31.2259C53.1987 31.3892 53.0128 31.6023 52.8826 31.8651C52.7524 32.1278 52.6873 32.4096 52.6873 32.7102V33.1932C52.6873 33.6051 52.7583 33.9543 52.9004 34.2408C53.0448 34.5249 53.2449 34.7415 53.5005 34.8906C53.7562 35.0374 54.0533 35.1108 54.3919 35.1108C54.612 35.1108 54.8109 35.08 54.9885 35.0185C55.1684 34.9545 55.3234 34.8598 55.4537 34.7344C55.5839 34.6065 55.6845 34.4479 55.7555 34.2585L56.5652 34.4858C56.4799 34.7604 56.3367 35.0019 56.1355 35.2102C55.9342 35.4162 55.6857 35.5772 55.3897 35.6932C55.0938 35.8068 54.7612 35.8636 54.3919 35.8636ZM59.9849 35.8636C59.5304 35.8636 59.1291 35.7488 58.7811 35.5192C58.4331 35.2872 58.1608 34.9605 57.9643 34.5391C57.7678 34.1153 57.6696 33.6146 57.6696 33.0369C57.6696 32.464 57.7678 31.9669 57.9643 31.5455C58.1608 31.1241 58.4342 30.7985 58.7846 30.5689C59.135 30.3393 59.5398 30.2244 59.9991 30.2244C60.3542 30.2244 60.6348 30.2836 60.8407 30.402C61.0491 30.518 61.2077 30.6506 61.3166 30.7997C61.4279 30.9465 61.5143 31.0672 61.5758 31.1619H61.6468V28.4773H62.4849V35.75H61.6752V34.9119H61.5758C61.5143 35.0114 61.4267 35.1368 61.313 35.2884C61.1994 35.4375 61.0372 35.5713 60.8265 35.6896C60.6158 35.8056 60.3353 35.8636 59.9849 35.8636ZM60.0985 35.1108C60.4347 35.1108 60.7188 35.0232 60.9508 34.848C61.1828 34.6705 61.3592 34.4254 61.4799 34.1129C61.6007 33.7981 61.661 33.4347 61.661 33.0227C61.661 32.6155 61.6019 32.2592 61.4835 31.9538C61.3651 31.6461 61.1899 31.407 60.9579 31.2365C60.7259 31.0637 60.4395 30.9773 60.0985 30.9773C59.7434 30.9773 59.4475 31.0684 59.2108 31.2507C58.9764 31.4306 58.8 31.6757 58.6816 31.9858C58.5656 32.2936 58.5076 32.6392 58.5076 33.0227C58.5076 33.411 58.5668 33.7637 58.6852 34.081C58.8059 34.3958 58.9835 34.6468 59.2179 34.8338C59.4546 35.0185 59.7482 35.1108 60.0985 35.1108Z"
        fill="#262626"
      />
      <rect
        x="25.3125"
        y="45.3125"
        width="9.375"
        height="9.375"
        rx="2.1875"
        fill="white"
        stroke="#A1A1A1"
        strokeWidth="0.625"
      />
      <path
        d="M45.8807 53.5V46.2273H48.4233C48.9299 46.2273 49.3478 46.3149 49.6768 46.4901C50.0059 46.6629 50.2509 46.8961 50.4119 47.1896C50.5729 47.4808 50.6534 47.804 50.6534 48.1591C50.6534 48.4716 50.5978 48.7296 50.4865 48.9332C50.3776 49.1368 50.2332 49.2978 50.0533 49.4162C49.8757 49.5346 49.6828 49.6222 49.4744 49.679V49.75C49.697 49.7642 49.9207 49.8423 50.1456 49.9844C50.3705 50.1264 50.5587 50.33 50.7102 50.5952C50.8617 50.8603 50.9375 51.1847 50.9375 51.5682C50.9375 51.9328 50.8546 52.2607 50.6889 52.5518C50.5232 52.843 50.2616 53.0739 49.9041 53.2443C49.5466 53.4148 49.0814 53.5 48.5085 53.5H45.8807ZM46.7614 52.7188H48.5085C49.0838 52.7188 49.4922 52.6075 49.7337 52.3849C49.9775 52.16 50.0994 51.8878 50.0994 51.5682C50.0994 51.322 50.0367 51.0947 49.9112 50.8864C49.7857 50.6757 49.607 50.5076 49.375 50.3821C49.143 50.2543 48.8684 50.1903 48.5511 50.1903H46.7614V52.7188ZM46.7614 49.4233H48.3949C48.66 49.4233 48.8991 49.3712 49.1122 49.267C49.3277 49.1629 49.4981 49.0161 49.6236 48.8267C49.7514 48.6373 49.8153 48.4148 49.8153 48.1591C49.8153 47.8395 49.7041 47.5684 49.4815 47.3459C49.259 47.121 48.9063 47.0085 48.4233 47.0085H46.7614V49.4233ZM53.109 46.2273V53.5H52.271V46.2273H53.109ZM58.0815 51.2699V48.0455H58.9196V53.5H58.0815V52.5767H58.0247C57.8968 52.8537 57.698 53.0893 57.4281 53.2834C57.1582 53.4751 56.8173 53.571 56.4054 53.571C56.0645 53.571 55.7614 53.4964 55.4963 53.3473C55.2311 53.1958 55.0228 52.9685 54.8713 52.6655C54.7198 52.3601 54.644 51.9754 54.644 51.5114V48.0455H55.4821V51.4545C55.4821 51.8523 55.5933 52.1695 55.8159 52.4062C56.0408 52.643 56.3272 52.7614 56.6752 52.7614C56.8836 52.7614 57.0955 52.7081 57.3109 52.6016C57.5287 52.495 57.711 52.3317 57.8578 52.1115C58.0069 51.8913 58.0815 51.6108 58.0815 51.2699ZM62.7415 53.6136C62.2159 53.6136 61.7625 53.4976 61.3814 53.2656C61.0026 53.0312 60.7102 52.7045 60.5043 52.2855C60.3007 51.8641 60.1989 51.3741 60.1989 50.8153C60.1989 50.2566 60.3007 49.7642 60.5043 49.3381C60.7102 48.9096 60.9967 48.5758 61.3636 48.3366C61.733 48.0952 62.1638 47.9744 62.6562 47.9744C62.9403 47.9744 63.2209 48.0218 63.4979 48.1165C63.7749 48.2112 64.027 48.3651 64.2543 48.5781C64.4815 48.7888 64.6626 49.0682 64.7976 49.4162C64.9325 49.7642 65 50.1927 65 50.7017V51.0568H60.7955V50.3324H64.1477C64.1477 50.0246 64.0862 49.75 63.9631 49.5085C63.8423 49.267 63.6695 49.0765 63.4446 48.9368C63.2221 48.7971 62.9593 48.7273 62.6562 48.7273C62.3224 48.7273 62.0336 48.8101 61.7898 48.9759C61.5483 49.1392 61.3625 49.3523 61.2322 49.6151C61.102 49.8778 61.0369 50.1596 61.0369 50.4602V50.9432C61.0369 51.3551 61.108 51.7043 61.25 51.9908C61.3944 52.2749 61.5945 52.4915 61.8501 52.6406C62.1058 52.7874 62.4029 52.8608 62.7415 52.8608C62.9616 52.8608 63.1605 52.83 63.3381 52.7685C63.518 52.7045 63.6731 52.6098 63.8033 52.4844C63.9335 52.3565 64.0341 52.1979 64.1051 52.0085L64.9148 52.2358C64.8295 52.5104 64.6863 52.7519 64.4851 52.9602C64.2839 53.1662 64.0353 53.3272 63.7393 53.4432C63.4434 53.5568 63.1108 53.6136 62.7415 53.6136Z"
        fill="#262626"
      />
      <rect
        x="25.3125"
        y="63.0625"
        width="9.375"
        height="9.375"
        rx="2.1875"
        fill="#171717"
      />
      <rect
        x="25.3125"
        y="63.0625"
        width="9.375"
        height="9.375"
        rx="2.1875"
        stroke="#171717"
        strokeWidth="0.625"
      />
      <g clipPath="url(#clip1_2001_4158)">
        <path
          d="M27.8298 67.8367L29.2187 69.5728L32.1701 65.927"
          stroke="white"
          strokeWidth="0.9375"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>
      <path
        d="M50.8523 66.25C50.7741 66.0109 50.6712 65.7966 50.5433 65.6072C50.4179 65.4155 50.2675 65.2521 50.0923 65.1172C49.9195 64.9822 49.723 64.8793 49.5028 64.8082C49.2827 64.7372 49.0412 64.7017 48.7784 64.7017C48.3475 64.7017 47.9557 64.813 47.603 65.0355C47.2502 65.258 46.9697 65.5859 46.7614 66.0192C46.553 66.4524 46.4489 66.9839 46.4489 67.6136C46.4489 68.2434 46.5542 68.7749 46.7649 69.2081C46.9756 69.6413 47.2609 69.9692 47.6207 70.1918C47.9806 70.4143 48.3854 70.5256 48.8352 70.5256C49.2519 70.5256 49.6188 70.4368 49.9361 70.2592C50.2557 70.0793 50.5043 69.826 50.6818 69.4993C50.8617 69.1702 50.9517 68.7831 50.9517 68.3381L51.2216 68.3949H49.0341V67.6136H51.804V68.3949C51.804 68.9938 51.6761 69.5147 51.4205 69.9574C51.1671 70.4001 50.8168 70.7434 50.3693 70.9872C49.9242 71.2287 49.4129 71.3494 48.8352 71.3494C48.1913 71.3494 47.6255 71.1979 47.1378 70.8949C46.6525 70.5919 46.2737 70.161 46.0014 69.6023C45.7315 69.0436 45.5966 68.3807 45.5966 67.6136C45.5966 67.0384 45.6735 66.5211 45.8274 66.0618C45.9837 65.6001 46.2038 65.2071 46.4879 64.8828C46.772 64.5585 47.1082 64.3099 47.4964 64.1371C47.8847 63.9643 48.312 63.8778 48.7784 63.8778C49.1619 63.8778 49.5194 63.9358 49.8509 64.0518C50.1847 64.1655 50.4818 64.3277 50.7422 64.5384C51.005 64.7467 51.224 64.9964 51.3991 65.2876C51.5743 65.5765 51.6951 65.8973 51.7614 66.25H50.8523ZM53.1987 71.25V65.7955H54.0083V66.6193H54.0652C54.1646 66.3494 54.3445 66.1304 54.6049 65.9624C54.8654 65.7943 55.1589 65.7102 55.4856 65.7102C55.5472 65.7102 55.6241 65.7114 55.7164 65.7138C55.8088 65.7161 55.8786 65.7197 55.926 65.7244V66.5767C55.8975 66.5696 55.8324 66.5589 55.7306 66.5447C55.6312 66.5282 55.5259 66.5199 55.4146 66.5199C55.1494 66.5199 54.9127 66.5755 54.7044 66.6868C54.4984 66.7957 54.335 66.9472 54.2143 67.1413C54.0959 67.3331 54.0368 67.5521 54.0368 67.7983V71.25H53.1987ZM59.0403 71.3636C58.5147 71.3636 58.0614 71.2476 57.6802 71.0156C57.3014 70.7812 57.0091 70.4545 56.8031 70.0355C56.5995 69.6141 56.4977 69.1241 56.4977 68.5653C56.4977 68.0066 56.5995 67.5142 56.8031 67.0881C57.0091 66.6596 57.2955 66.3258 57.6625 66.0866C58.0318 65.8452 58.4627 65.7244 58.9551 65.7244C59.2392 65.7244 59.5197 65.7718 59.7967 65.8665C60.0737 65.9612 60.3258 66.1151 60.5531 66.3281C60.7804 66.5388 60.9615 66.8182 61.0964 67.1662C61.2314 67.5142 61.2988 67.9427 61.2988 68.4517V68.8068H57.0943V68.0824H60.4466C60.4466 67.7746 60.385 67.5 60.2619 67.2585C60.1412 67.017 59.9683 66.8265 59.7434 66.6868C59.5209 66.5471 59.2581 66.4773 58.9551 66.4773C58.6213 66.4773 58.3324 66.5601 58.0886 66.7259C57.8471 66.8892 57.6613 67.1023 57.5311 67.3651C57.4009 67.6278 57.3358 67.9096 57.3358 68.2102V68.6932C57.3358 69.1051 57.4068 69.4543 57.5488 69.7408C57.6932 70.0249 57.8933 70.2415 58.149 70.3906C58.4047 70.5374 58.7018 70.6108 59.0403 70.6108C59.2605 70.6108 59.4593 70.58 59.6369 70.5185C59.8168 70.4545 59.9719 70.3598 60.1021 70.2344C60.2323 70.1065 60.3329 69.9479 60.4039 69.7585L61.2136 69.9858C61.1284 70.2604 60.9851 70.5019 60.7839 70.7102C60.5827 70.9162 60.3341 71.0772 60.0382 71.1932C59.7422 71.3068 59.4096 71.3636 59.0403 71.3636ZM64.8606 71.3636C64.335 71.3636 63.8817 71.2476 63.5005 71.0156C63.1217 70.7812 62.8294 70.4545 62.6234 70.0355C62.4198 69.6141 62.318 69.1241 62.318 68.5653C62.318 68.0066 62.4198 67.5142 62.6234 67.0881C62.8294 66.6596 63.1158 66.3258 63.4828 66.0866C63.8521 65.8452 64.283 65.7244 64.7754 65.7244C65.0595 65.7244 65.34 65.7718 65.617 65.8665C65.894 65.9612 66.1461 66.1151 66.3734 66.3281C66.6007 66.5388 66.7818 66.8182 66.9167 67.1662C67.0517 67.5142 67.1191 67.9427 67.1191 68.4517V68.8068H62.9146V68.0824H66.2669C66.2669 67.7746 66.2053 67.5 66.0822 67.2585C65.9615 67.017 65.7886 66.8265 65.5637 66.6868C65.3412 66.5471 65.0784 66.4773 64.7754 66.4773C64.4416 66.4773 64.1528 66.5601 63.9089 66.7259C63.6674 66.8892 63.4816 67.1023 63.3514 67.3651C63.2212 67.6278 63.1561 67.9096 63.1561 68.2102V68.6932C63.1561 69.1051 63.2271 69.4543 63.3691 69.7408C63.5136 70.0249 63.7136 70.2415 63.9693 70.3906C64.225 70.5374 64.5221 70.6108 64.8606 70.6108C65.0808 70.6108 65.2797 70.58 65.4572 70.5185C65.6371 70.4545 65.7922 70.3598 65.9224 70.2344C66.0526 70.1065 66.1532 69.9479 66.2243 69.7585L67.0339 69.9858C66.9487 70.2604 66.8055 70.5019 66.6042 70.7102C66.403 70.9162 66.1544 71.0772 65.8585 71.1932C65.5626 71.3068 65.2299 71.3636 64.8606 71.3636ZM69.2321 67.9688V71.25H68.394V65.7955H69.2037V66.6477H69.2747C69.4025 66.3707 69.5967 66.1482 69.8571 65.9801C70.1175 65.8097 70.4537 65.7244 70.8656 65.7244C71.2349 65.7244 71.5581 65.8002 71.835 65.9517C72.112 66.1009 72.3275 66.3281 72.4814 66.6335C72.6352 66.9366 72.7122 67.3201 72.7122 67.7841V71.25H71.8741V67.8409C71.8741 67.4124 71.7628 67.0786 71.5403 66.8395C71.3178 66.598 71.0124 66.4773 70.6241 66.4773C70.3566 66.4773 70.1175 66.5353 69.9068 66.6513C69.6984 66.7673 69.5339 66.9366 69.4132 67.1591C69.2924 67.3816 69.2321 67.6515 69.2321 67.9688Z"
        fill="#262626"
      />
      <path
        d="M99.5 29.25C101.571 29.25 103.25 30.9289 103.25 33C103.25 35.0711 101.571 36.75 99.5 36.75C97.4289 36.75 95.75 35.0711 95.75 33C95.75 30.9289 97.4289 29.25 99.5 29.25Z"
        fill="white"
      />
      <path
        d="M99.5 29.25C101.571 29.25 103.25 30.9289 103.25 33C103.25 35.0711 101.571 36.75 99.5 36.75C97.4289 36.75 95.75 35.0711 95.75 33C95.75 30.9289 97.4289 29.25 99.5 29.25Z"
        stroke="#171717"
        strokeWidth="2.5"
      />
      <path
        d="M114.756 29.2273H115.764L117.781 32.6222H117.866L119.884 29.2273H120.892L118.264 33.5028V36.5H117.384V33.5028L114.756 29.2273ZM123.433 36.6136C122.907 36.6136 122.454 36.4976 122.073 36.2656C121.694 36.0312 121.402 35.7045 121.196 35.2855C120.992 34.8641 120.89 34.3741 120.89 33.8153C120.89 33.2566 120.992 32.7642 121.196 32.3381C121.402 31.9096 121.688 31.5758 122.055 31.3366C122.424 31.0952 122.855 30.9744 123.348 30.9744C123.632 30.9744 123.912 31.0218 124.189 31.1165C124.466 31.2112 124.718 31.3651 124.946 31.5781C125.173 31.7888 125.354 32.0682 125.489 32.4162C125.624 32.7642 125.691 33.1927 125.691 33.7017V34.0568H121.487V33.3324H124.839C124.839 33.0246 124.778 32.75 124.654 32.5085C124.534 32.267 124.361 32.0765 124.136 31.9368C123.913 31.7971 123.651 31.7273 123.348 31.7273C123.014 31.7273 122.725 31.8101 122.481 31.9759C122.24 32.1392 122.054 32.3523 121.924 32.6151C121.793 32.8778 121.728 33.1596 121.728 33.4602V33.9432C121.728 34.3551 121.799 34.7043 121.941 34.9908C122.086 35.2749 122.286 35.4915 122.542 35.6406C122.797 35.7874 123.094 35.8608 123.433 35.8608C123.653 35.8608 123.852 35.83 124.029 35.7685C124.209 35.7045 124.364 35.6098 124.495 35.4844C124.625 35.3565 124.725 35.1979 124.797 35.0085L125.606 35.2358C125.521 35.5104 125.378 35.7519 125.176 35.9602C124.975 36.1662 124.727 36.3272 124.431 36.4432C124.135 36.5568 123.802 36.6136 123.433 36.6136ZM130.83 32.267L130.077 32.4801C130.03 32.3546 129.96 32.2327 129.868 32.1143C129.778 31.9936 129.654 31.8942 129.498 31.8161C129.342 31.7379 129.142 31.6989 128.898 31.6989C128.564 31.6989 128.286 31.7758 128.064 31.9297C127.843 32.0812 127.733 32.2741 127.733 32.5085C127.733 32.7169 127.809 32.8814 127.961 33.0021C128.112 33.1229 128.349 33.2235 128.671 33.304L129.48 33.5028C129.968 33.6212 130.332 33.8023 130.571 34.0462C130.81 34.2876 130.929 34.599 130.929 34.9801C130.929 35.2926 130.839 35.572 130.659 35.8182C130.482 36.0644 130.233 36.2585 129.914 36.4006C129.594 36.5426 129.222 36.6136 128.799 36.6136C128.242 36.6136 127.782 36.4929 127.417 36.2514C127.053 36.0099 126.822 35.6572 126.725 35.1932L127.52 34.9943C127.596 35.2879 127.739 35.508 127.95 35.6548C128.163 35.8016 128.441 35.875 128.784 35.875C129.175 35.875 129.485 35.7921 129.715 35.6264C129.947 35.4583 130.063 35.2571 130.063 35.0227C130.063 34.8333 129.997 34.6747 129.864 34.5469C129.731 34.4167 129.528 34.3196 129.253 34.2557L128.344 34.0426C127.845 33.9242 127.478 33.7408 127.243 33.4922C127.011 33.2412 126.895 32.9276 126.895 32.5511C126.895 32.2434 126.982 31.9711 127.154 31.7344C127.33 31.4976 127.568 31.3118 127.868 31.1768C128.171 31.0419 128.515 30.9744 128.898 30.9744C129.438 30.9744 129.862 31.0928 130.169 31.3295C130.48 31.5663 130.7 31.8788 130.83 32.267Z"
        fill="#262626"
      />
      <path
        d="M99.5 45.3125C102.089 45.3125 104.188 47.4112 104.188 50C104.188 52.5888 102.089 54.6875 99.5 54.6875C96.9112 54.6875 94.8125 52.5888 94.8125 50C94.8125 47.4112 96.9112 45.3125 99.5 45.3125Z"
        fill="white"
      />
      <path
        d="M99.5 45.3125C102.089 45.3125 104.188 47.4112 104.188 50C104.188 52.5888 102.089 54.6875 99.5 54.6875C96.9112 54.6875 94.8125 52.5888 94.8125 50C94.8125 47.4112 96.9112 45.3125 99.5 45.3125Z"
        stroke="#A1A1A1"
        strokeWidth="0.625"
      />
      <path
        d="M121.148 46.2273V53.5H120.295L116.332 47.7898H116.261V53.5H115.381V46.2273H116.233L120.21 51.9517H120.281V46.2273H121.148ZM125.012 53.6136C124.52 53.6136 124.088 53.4964 123.716 53.2621C123.347 53.0277 123.058 52.6998 122.85 52.2784C122.644 51.857 122.541 51.3646 122.541 50.8011C122.541 50.233 122.644 49.737 122.85 49.3132C123.058 48.8894 123.347 48.5604 123.716 48.326C124.088 48.0916 124.52 47.9744 125.012 47.9744C125.505 47.9744 125.936 48.0916 126.305 48.326C126.677 48.5604 126.965 48.8894 127.171 49.3132C127.38 49.737 127.484 50.233 127.484 50.8011C127.484 51.3646 127.38 51.857 127.171 52.2784C126.965 52.6998 126.677 53.0277 126.305 53.2621C125.936 53.4964 125.505 53.6136 125.012 53.6136ZM125.012 52.8608C125.386 52.8608 125.694 52.7649 125.936 52.5732C126.177 52.3814 126.356 52.1293 126.472 51.8168C126.588 51.5043 126.646 51.1657 126.646 50.8011C126.646 50.4366 126.588 50.0968 126.472 49.782C126.356 49.4671 126.177 49.2126 125.936 49.0185C125.694 48.8243 125.386 48.7273 125.012 48.7273C124.638 48.7273 124.33 48.8243 124.089 49.0185C123.847 49.2126 123.669 49.4671 123.553 49.782C123.437 50.0968 123.379 50.4366 123.379 50.8011C123.379 51.1657 123.437 51.5043 123.553 51.8168C123.669 52.1293 123.847 52.3814 124.089 52.5732C124.33 52.7649 124.638 52.8608 125.012 52.8608Z"
        fill="#262626"
      />
      <path
        d="M99.5 62.3125C102.089 62.3125 104.188 64.4112 104.188 67C104.188 69.5888 102.089 71.6875 99.5 71.6875C96.9112 71.6875 94.8125 69.5888 94.8125 67C94.8125 64.4112 96.9112 62.3125 99.5 62.3125Z"
        fill="white"
      />
      <path
        d="M99.5 62.3125C102.089 62.3125 104.188 64.4112 104.188 67C104.188 69.5888 102.089 71.6875 99.5 71.6875C96.9112 71.6875 94.8125 69.5888 94.8125 67C94.8125 64.4112 96.9112 62.3125 99.5 62.3125Z"
        stroke="#A1A1A1"
        strokeWidth="0.625"
      />
      <path
        d="M115.381 63.2273H116.432L118.903 69.2642H118.989L121.46 63.2273H122.511V70.5H121.688V64.9744H121.616L119.344 70.5H118.548L116.276 64.9744H116.205V70.5H115.381V63.2273ZM125.769 70.6278C125.423 70.6278 125.109 70.5627 124.828 70.4325C124.546 70.3 124.322 70.1094 124.156 69.8608C123.991 69.6098 123.908 69.3068 123.908 68.9517C123.908 68.6392 123.969 68.3859 124.093 68.1918C124.216 67.9953 124.38 67.8414 124.586 67.7301C124.792 67.6188 125.019 67.536 125.268 67.4815C125.519 67.4247 125.771 67.3797 126.024 67.3466C126.356 67.304 126.624 67.272 126.83 67.2507C127.039 67.227 127.19 67.188 127.285 67.1335C127.382 67.0791 127.431 66.9844 127.431 66.8494V66.821C127.431 66.4706 127.335 66.1984 127.143 66.0043C126.954 65.8101 126.666 65.7131 126.28 65.7131C125.88 65.7131 125.566 65.8007 125.339 65.9759C125.112 66.151 124.952 66.3381 124.86 66.5369L124.064 66.2528C124.206 65.9214 124.396 65.6634 124.632 65.4787C124.871 65.2917 125.132 65.1615 125.414 65.0881C125.698 65.0123 125.977 64.9744 126.252 64.9744C126.427 64.9744 126.628 64.9957 126.855 65.0384C127.085 65.0786 127.306 65.1626 127.519 65.2905C127.735 65.4183 127.914 65.6113 128.056 65.8693C128.198 66.1274 128.269 66.473 128.269 66.9062V70.5H127.431V69.7614H127.388C127.331 69.8797 127.236 70.0064 127.104 70.1413C126.971 70.2763 126.795 70.3911 126.575 70.4858C126.355 70.5805 126.086 70.6278 125.769 70.6278ZM125.896 69.875C126.228 69.875 126.507 69.8099 126.735 69.6797C126.964 69.5495 127.137 69.3814 127.253 69.1754C127.371 68.9695 127.431 68.7528 127.431 68.5256V67.7585C127.395 67.8011 127.317 67.8402 127.196 67.8757C127.078 67.9089 126.941 67.9384 126.784 67.9645C126.63 67.9882 126.48 68.0095 126.333 68.0284C126.189 68.045 126.072 68.0592 125.982 68.071C125.764 68.0994 125.56 68.1456 125.371 68.2095C125.184 68.2711 125.032 68.3646 124.916 68.4901C124.803 68.6132 124.746 68.7812 124.746 68.9943C124.746 69.2855 124.854 69.5057 125.069 69.6548C125.287 69.8016 125.563 69.875 125.896 69.875ZM130.143 72.5455C130.001 72.5455 129.874 72.5336 129.763 72.5099C129.652 72.4886 129.575 72.4673 129.532 72.446L129.745 71.7074C129.949 71.7595 130.129 71.7784 130.285 71.7642C130.441 71.75 130.58 71.6802 130.7 71.5547C130.823 71.4316 130.936 71.2315 131.038 70.9545L131.194 70.5284L129.177 65.0455H130.086L131.592 69.392H131.648L133.154 65.0455H134.063L131.748 71.2955C131.644 71.5772 131.515 71.8104 131.361 71.995C131.207 72.1821 131.028 72.3205 130.825 72.4105C130.623 72.5005 130.396 72.5455 130.143 72.5455ZM135.283 70.5V63.2273H136.121V65.9119H136.192C136.254 65.8172 136.339 65.6965 136.448 65.5497C136.559 65.4006 136.718 65.268 136.924 65.152C137.132 65.0336 137.414 64.9744 137.769 64.9744C138.228 64.9744 138.633 65.0893 138.983 65.3189C139.334 65.5485 139.607 65.8741 139.804 66.2955C140 66.7169 140.098 67.214 140.098 67.7869C140.098 68.3646 140 68.8653 139.804 69.2891C139.607 69.7105 139.335 70.0372 138.987 70.2692C138.639 70.4988 138.238 70.6136 137.783 70.6136C137.433 70.6136 137.152 70.5556 136.941 70.4396C136.731 70.3213 136.569 70.1875 136.455 70.0384C136.341 69.8868 136.254 69.7614 136.192 69.6619H136.093V70.5H135.283ZM136.107 67.7727C136.107 68.1847 136.167 68.5481 136.288 68.8629C136.409 69.1754 136.585 69.4205 136.817 69.598C137.049 69.7732 137.333 69.8608 137.669 69.8608C138.02 69.8608 138.312 69.7685 138.547 69.5838C138.783 69.3968 138.961 69.1458 139.079 68.831C139.2 68.5137 139.26 68.161 139.26 67.7727C139.26 67.3892 139.201 67.0436 139.083 66.7358C138.967 66.4257 138.79 66.1806 138.554 66.0007C138.319 65.8184 138.025 65.7273 137.669 65.7273C137.328 65.7273 137.042 65.8137 136.81 65.9865C136.578 66.157 136.403 66.3961 136.284 66.7038C136.166 67.0092 136.107 67.3655 136.107 67.7727ZM143.667 70.6136C143.142 70.6136 142.688 70.4976 142.307 70.2656C141.928 70.0312 141.636 69.7045 141.43 69.2855C141.226 68.8641 141.125 68.3741 141.125 67.8153C141.125 67.2566 141.226 66.7642 141.43 66.3381C141.636 65.9096 141.922 65.5758 142.289 65.3366C142.659 65.0952 143.09 64.9744 143.582 64.9744C143.866 64.9744 144.147 65.0218 144.424 65.1165C144.701 65.2112 144.953 65.3651 145.18 65.5781C145.407 65.7888 145.588 66.0682 145.723 66.4162C145.858 66.7642 145.926 67.1927 145.926 67.7017V68.0568H141.721V67.3324H145.074C145.074 67.0246 145.012 66.75 144.889 66.5085C144.768 66.267 144.595 66.0765 144.37 65.9368C144.148 65.7971 143.885 65.7273 143.582 65.7273C143.248 65.7273 142.959 65.8101 142.716 65.9759C142.474 66.1392 142.288 66.3523 142.158 66.6151C142.028 66.8778 141.963 67.1596 141.963 67.4602V67.9432C141.963 68.3551 142.034 68.7043 142.176 68.9908C142.32 69.2749 142.52 69.4915 142.776 69.6406C143.032 69.7874 143.329 69.8608 143.667 69.8608C143.887 69.8608 144.086 69.83 144.264 69.7685C144.444 69.7045 144.599 69.6098 144.729 69.4844C144.859 69.3565 144.96 69.1979 145.031 69.0085L145.841 69.2358C145.755 69.5104 145.612 69.7519 145.411 69.9602C145.21 70.1662 144.961 70.3272 144.665 70.4432C144.369 70.5568 144.037 70.6136 143.667 70.6136Z"
        fill="#262626"
      />
      <defs>
        <clipPath id="clip0_2001_4158">
          <rect
            width="6.25"
            height="6.25"
            fill="white"
            transform="translate(26.875 29.125)"
          />
        </clipPath>
        <clipPath id="clip1_2001_4158">
          <rect
            width="6.25"
            height="6.25"
            fill="white"
            transform="translate(26.875 64.625)"
          />
        </clipPath>
      </defs>
    </svg>
  );
}
